import { RewardLog } from '@/api/draw'
import ButtonImage from '@/assets/button-4.png'
import Title from '@/assets/thsnk-99.png'
import { Close } from '@react-vant/icons'
import classNames from 'classnames'
import { useMemo, useState } from 'react'
import { Overlay, Popup, Toast } from 'react-vant'
import { useQuery } from 'umi'
import styles from './index.module.less'

import useRulesPopup from './useRulesPopup'

export default function useVirtualDialog() {
  const [visible, setvisible] = useState<boolean>(false)
  const { renderNode: renderRuleNode, open: openRules } = useRulesPopup()

  const { data: rewardLog } = useQuery(
    ['get/log'],
    RewardLog,

  )

  const link = useMemo(() => `https://html5.moji.com/tpd/contac202510/index.html?redeemCode=${rewardLog?.code}`, [rewardLog])

  function renderNode() {
    return (
      <>
        <Overlay onClick={() => setvisible(false)} zIndex={99} visible={visible} className="flex flex-col items-center pt-[150px]">

          <h1
            className="w-[322px] h-[78px] bg-cover bg-center"
            style={{
              backgroundImage: `url(${Title})`,
            }}
          >
          </h1>

          <div className="w-[640px] mt-4 relative rounded-2xl bg-gradient-to-t from-[#6991c7] to-[#a3bded] border-white border px-4 pb-4 text-base overflow-visible">
            <div className="my-12 text-xl text-center text-white bg-[#7c97cb] rounded-lg py-8 px-4">
              <p className="text-[#1b2443] text-lg font-medium">为您跳转第三方平台</p>
              <p className=" text-[#455876] text-base mt-1">（墨迹会员兑奖平台）</p>
            </div>

            <Close className="absolute text-3xl text-white active:scale-95 right-0 -top-[100px] z-10" onClick={() => setvisible(false)} />

            <i
              className={classNames(styles.kang, 'absolute -left-4 -bottom-8')}
            >
            </i>

            <button
              name="立刻跳转"
              onClick={() => {
                if (!rewardLog?.code)
                  return Toast.fail('兑换码不存在')
                window.location.href = link
              }}
              type="button"
              className=" w-[400px] h-[116px] bg-no-repeat bg-center block mx-auto  bg-cover active:scale-95"
              style={{
                backgroundImage: `url(${ButtonImage})`,
              }}
            />
            <p
              className="mt-2 text-base text-center text-white underline"
              onClick={() => openRules()}
            >
              活动规则
            </p>
          </div>
        </Overlay>

        {renderRuleNode()}
      </>
    )
  }

  return {
    open() {
      setvisible(true)
    },
    renderNode,
  }
}
